<template>
  <div>

    <!-- 产品信息 -->
    <el-descriptions :column="3" border>
      <template slot="title">
        <span>产品信息</span>&nbsp;&nbsp;
        <el-button
          class="edit-button"
          type="text"
          icon="el-icon-edit"
          @click="productUpdate"
          v-hasPermi="['iot:product:edit']"
        >编辑</el-button>
      </template>
      <el-descriptions-item>
        <template slot="label">

        </template>
        {{ productData.id }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          所属品类
        </template>
        {{ productData.category && productData.category.categoryName }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          消息协议
        </template>
        {{ productData.protocolId }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          传输协议
        </template>
        {{ productData.transportProtocol }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          设备类型
        </template>
        <dict-tag :options="dict.type.iot_product_device_type" :value="productData.deviceType"/>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          描述
        </template>
        {{ productData.description }}
      </el-descriptions-item>
    </el-descriptions>

    <!-- 添加或修改产品对话框 -->
    <product-add-edit ref="productAddEdit" />

    <!-- 认证配置 -->
    <el-descriptions v-show="properties.length > 0" class="descriptions" :column="3" border>
      <template slot="title">
        <span>配置</span>&nbsp;&nbsp;
        <el-button
          class="edit-button"
          type="text"
          icon="el-icon-edit"
          @click="configurationUpdate"
          v-hasPermi="['iot:product:edit']"
        >编辑</el-button>
        <div class="template-small-title">{{ name }}</div>
      </template>
      <el-descriptions-item v-for="(item, index) in properties" :key="index">
        <template slot="label">
          {{ item.name }}
          <el-tooltip class="item" effect="dark" :content="item.description" placement="top">
            <i class="el-icon-question"></i>
          </el-tooltip>
        </template>
        {{ getProperty(item) }}
      </el-descriptions-item>
    </el-descriptions>

    <!-- 添加或修改协议配置对话框 -->
    <configuration-add-edit @submit="submitConfiguration" ref="configurationAddEdit" />

  </div>
</template>

<script>
import ProductAddEdit from '@/views/iot/product/productAddEdit'
import ConfigurationAddEdit from '@/views/iot/product/configurationAddEdit'
import { mapState } from 'vuex'
import { deployProduct, getConfigMetadata, updateConfiguration } from '@/api/iot/product'

export default {
  name: 'ProductDescriptions',
  // 字典
  dicts: [
    // 设备类型
    'iot_product_device_type'
  ],
  components: {
    // 产品添加修改对话框组件
    ProductAddEdit,
    // 协议配置添加修改对话框组件
    ConfigurationAddEdit,
  },
  data() {
    return {
      name: undefined,
      properties: [],
      // 协议配置信息
      configuration: {}
    }
  },
  computed: {
    ...mapState({
      productData: state => state.product.productData
    }),
  },
  watch: {

    productData() {
      this.getConfigMetadata();
    },

    'productData.configuration'(configuration) {

      if (!configuration) {
        this.configuration = {};
        return;
      }

      this.configuration = JSON.parse(configuration);
    }
  },
  methods: {
    /** 获取产品需要的配置定义信息 */
    getConfigMetadata() {
      getConfigMetadata(this.productData.id).then(({ data }) => {
        if (data) {
          this.name = data.name;
          this.properties = data.properties || [];
        }
      })
    },
    /** 编辑按钮操作 */
    productUpdate() {
      this.$refs.productAddEdit.handleUpdate(this.productData.id);
    },

    /** 协议配置编辑按钮操作 */
    configurationUpdate() {
      this.$refs.configurationAddEdit.handleUpdate(this.properties, JSON.parse(this.productData.configuration));
    },

    /** 提交协议配置信息 */
    submitConfiguration(formData, callback, publishState) {
      let configuration = JSON.stringify(formData);
      // 更新认证配置
      updateConfiguration(this.productData.id, configuration).then(() => {
        if (typeof callback === 'function') {
          callback()
        }
        this.$set(this.productData, 'configuration', configuration);
        if (publishState === 1) {
          // 部署
          deployProduct(this.productData.id).then(() => {
            this.$set(this.productData, 'publishState', 1);
          });
        }
      });
    },

    getProperty(data) {
      let property = this.configuration[data.property]
      if (property) {
        return data.type.type === 'password'? '••••••': this.configuration[data.property]
      }
      return '';

    }

  }
}
</script>

<style lang="scss" scoped>
.descriptions {
  margin-top: 20px;

  .template-small-title {
    margin-top: 20px;
    font-size: 14px;
    color: rgba(0,0,0,0.6);
  }
}

.edit-button {
  margin-left: 30px;
}

</style>
